<template>
	<view class="bizPage" :style="mainStore.themeColor">
		<status-bar title="活动详情" />
		<view class="p-re">
			<image class="img" :src="imgUrls(pageData.cover)" mode="aspectFill"></image>
			<view class="right_top flexac p-ab" :style="{background: getBgColor(pageData)}">{{ pageData.statusName }}</view>
		</view>
		<view class="info padding20">
			<view class="size28 color-333 bold m-bot20">{{ pageData.name }}</view>
			<view class="d-flex m-bot20">
				<image class="icon m-right10" :src="staticImg + 'hd_sj.png'" mode="aspectFit"></image>
				<view class="size26 color-222 bold">活动时间：</view>
				<view class="flex-1 size26 color-666">{{ pageData.startTime }} - {{ pageData.endTime }}</view>
			</view>
			<view class="d-flex m-bot20">
				<image class="icon m-right10" :src="staticImg + 'hd_dd.png'" mode="aspectFit"></image>
				<view class="size26 color-222 bold">活动地点：</view>
				<view class="flex-1 size26 color-666">{{ pageData.address }}</view>
				<image class="icon" :src="staticImg + 'hd_dw.png'" mode="aspectFit" @click="locate(pageData)"></image>
			</view>
			<view class="d-flex m-bot20">
				<image class="icon m-right10" :src="staticImg + 'hd_zzr.png'" mode="aspectFit"></image>
				<view class="size26 color-222 bold">组织人：</view>
				<view class="flex-1 size26 color-666">{{ pageData.organizer }}</view>
			</view>
			<view class="d-flex">
				<image class="icon m-right10" :src="staticImg + 'hd_lxdh.png'" mode="aspectFit"></image>
				<view class="size26 color-222 bold">联系电话：</view>
				<view class="size26 color-666" @click="Call(pageData.phone)">{{ pageData.phone }}</view>
			</view>
		</view>
		<view class="padding20">
			<view class="d-flex m-bot20">
				<image class="icon m-right10" :src="staticImg + 'hd_xq.png'" mode="aspectFit"></image>
				<view class="size26 color-222 bold">活动详情：</view>
			</view>
			<view class="size26 color-666 line40">{{ pageData.activityContent }}</view>
		</view>
		<block v-if="pageData">
			<view class="btn flexac themeBg size34 white" @click="handleJoin" v-if="pageData.mandatory == 0 && !pageData.hasSign && pageData.statusName != '已结束'">报名</view>
			<view class="btn flexac themeBg size34 white" @click="handleSign" v-if="pageData.mandatory == 1 || pageData.hasSign">{{ pageData.checkedIn ? '已签到' : '签到' }}</view>
		</block>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useMainStore } from '@/stores/index'
	import { staticImg } from '@/utils/config.js'
	import { Toast, imgUrls, Call } from '@/utils/utils.js'
	import Http from '@/utils/request.js'
	import statusBar from '../components/statusBar.vue'
	
	const mainStore = useMainStore()
	const pageData = ref('')
	const id = ref('')
	
	onLoad((e) => {
		if(e.id) id.value = e.id
		getInfo()
	})
	
	const getInfo = () => {
		Http.get({
			url: '/hr/activity/detail',
			data: {
				id: id.value
			}
		}).then(res => {
			if(res.code != 0) return Toast(res.msg)
			pageData.value = res.data || ''
		})
	}
	
	// 报名
	const handleJoin = () => {
		Http.post({
			url: '/hr/activity/enroll',
			data: {
				activityId: id.value
			},
			Typejson: false
		}).then(res => {
			Toast(res.msg)
			if(res.code == 0) getInfo()
		})
	}

	// 签到
	const handleSign = () => {
		if(pageData.value.checkedIn) return
		Http.post({
			url: '/hr/activity/signIn',
			data: {
				activityId: id.value
			},
			Typejson: false
		}).then(res => {
			Toast(res.msg)
			if(res.code == 0) getInfo()
		})
	}
	
	const locate = (item) => {
		uni.openLocation({
			latitude: parseFloat(item.latitude),
			longitude: parseFloat(item.longitude),
			name: item.name,
			address: item.address,
			complete(res) {
				console.log(res)
			}
		})
	}
	
	const getBgColor = (item) => {
		switch (item.statusName){
			case '未开始':
				return '#FFB543'
			case '进行中':
				return '#52A4FF'
			case '已结束':
				return '#CCC'
		}
	}
</script>

<style lang="scss" scoped>
	.bizPage {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}
	.img {
		width: 100%;
		height: 420rpx;
	}
	.right_top {
		width: 150rpx;
		height: 60rpx;
		border-radius: 0rpx 0rpx 0rpx 30rpx;
		font-size: 24rpx;
		color: #FFF;
		right: 0;
		top: 0;
	}
	.info {
		min-height: 442rpx;
		border-bottom: 20rpx solid #F6F6F6;
	}
	.icon {
		width: 30rpx;
		height: 30rpx;
	}
	.btn {
		width: 670rpx;
		height: 80rpx;
		border-radius: 40rpx;
		position: fixed;
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		left: 40rpx;
		z-index: 1;
	}
</style>
